<template>
    <div class="box">
        <div class="imgBox">
            <img class='videoImg' src="./images/2.jpg" alt="">
            <img class="playerImg" src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png" alt="">
        </div>
        <div class="textDesc">
                古典舞《声声慢》完整版“青砖伴瓦漆白马踏新泥”
        </div>
        <div class="bottom">
            <svg t="1666161649493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4233" width="18" height="18"><path d="M817.1 830.9H249.9C182.1 830.9 127 775.8 127 708V211.8c0-67.8 55.1-123 122.9-123H817c67.8 0 122.9 55.2 122.9 123V708c0.1 67.8-55 122.9-122.8 122.9zM249.9 141.5c-38.7 0-70.3 31.5-70.3 70.3V708c0 38.7 31.5 70.3 70.3 70.3H817c38.7 0 70.3-31.5 70.3-70.3V211.8c0-38.8-31.5-70.3-70.3-70.3H249.9z" fill="#bfbfbf" p-id="4234"></path><path d="M664.5 502.3l-157.3 90.8c-32.7 18.9-73.5-4.7-73.5-42.5V368.9c0-37.7 40.9-61.3 73.5-42.5l157.3 90.8c32.7 19.1 32.7 66.3 0 85.1z" fill="#bfbfbf" p-id="4235"></path></svg>
            <span style="margin-left:4px;font-size: 12px;color:#7d8090">26</span>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.box {
    width: 240px;
    margin-right:20px;
}
.imgBox{
    position: relative;
    border-radius: 4px;
}
.videoImg {
    width: 100%;
    height: 134px;
    border-radius: 4px;

}

.playerImg {
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 6px;
    left: 10px;
}
.textDesc{
    width:100%;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 超出部分用省略号代替 */
    text-overflow: ellipsis;
    /*  将对象作为弹性伸缩盒子模型显示。 */
    display: -webkit-box;
    /* 两行显示 */
    -webkit-line-clamp: 2;
    /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
    -webkit-box-orient: vertical;
    padding:10px 0;
}

.bottom{
    display: flex;
}
</style>